<template>
  <div class="app-container">
    <div class="tab_container">
      <el-tabs v-model="activeTabsName" class="demo-tabs" @tab-click="clickTabs">
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
        >
          <component :is="tab.component" v-if="activeTabsName === tab.name"></component>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import myApplication from "./components/myApplication";
import approvalByMyself from "./components/approvalByMyself";

const { proxy } = getCurrentInstance();
const activeTabsName = ref("myApplication");

const tabs = reactive([
  {
    id: 0,
    name: "myApplication",
    label: t("myApplication.title"),
    component: markRaw(myApplication),
  },
  {
    id: 1,
    name: "approvalByMyself",
    label: t("approvalByMyself.title"),
    component: markRaw(approvalByMyself),
  },
]);

const clickTabs = (tab, tabIndex) => {
  activeTabsName.value = tab.paneName;
};
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  .tab_container {
    margin: 0 20px;
    height: 100%;
    width: calc(100% - 40px);
    // background: rebeccapurple;
    position: relative;
    .el-tabs {
      height: 100%;
      width: 100%;
      // position: absolute;
      display: flex;
      // flex-direction: column;
      :deep(.el-tabs__content) {
        flex: 1;
      }
      :deep(.el-tab-pane) {
        height: 100%;
      }
    }
  }
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
}
</style>
